<template>
  <div class="tooltipWrap" style="display: flex; align-items: center">
    <a-popover :title="title">
      <template slot="content">
        <div class="contentInfo" style="max-width: 20vw">
          {{ value }}
        </div>
      </template>
      <div class="one hovers" style="text-align: left">
        {{ valueFormater(value) }}
      </div>
      <!-- <a-button size="small" type="default">
                <a-icon type="small-dash" />
            </a-button> -->
    </a-popover>
  </div>
</template>
<script>
export default {
  name: "ToolTip",
  props: {
    record: {
      type: Object,
      default: () => { },
    },
    value: {
      type: [Array, Object, String, Number],
    },
    columnsList: {
      type: [Object, Array],
      default: () => [],
    },
    dataSource: {
      type: [Object, Array],
      default: () => [],
    },
    type: {
      type: [String, Number],
      default: () => [],
    },
    rowData: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      maxLength: 5,
      isShow: false,
      title: "",
    };
  },
  methods: {
    valueFormater(e) {
      let arr = e.split(",");
      let res;
      if (arr.length > this.maxLength) {
        res = arr.filter((val, ind) => ind < this.maxLength);
        res = res.join(",");
        this.isShow = true;
      } else {
        res = e;
      }
      return res;
    },
  },
  mounted() {
    this.columnsList.filter((val) => {
      if (val.dataIndex == this.type || val.diyDataIndex == this.type) {
        this.title = val.title;
      }
    });
  },
};
</script>
<style lang="less" scoped>
.tooltipWrap{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contentInfo {
  max-height: 40vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.one {
  white-space: nowrap; //不换行
  overflow: hidden; //超出部分隐藏
  text-overflow: ellipsis; //文本溢出显示省略号
}

.hovers {
  cursor: pointer;
}
</style>
